<template>
  <div class="search">
    <header>
      <div class="headerTop">
        <span @click="GoBack()"><van-icon name="arrow-left" /></span>
        <div class="seachInput">
          <van-icon name="search" />
          <input type="text" v-model="shopKeyWords" @keyup="searchGoods">
        </div>
        <span @click="handleFiflter()">筛选</span>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" @change="sortGoods(value2)"/>
      </van-dropdown-menu>
    </header>
    <section>
      <dl v-for="(item,index) in shopListItem" @click="jumpGoods(item.gid)" v-show="x">
        <dt>
          <img v-lazy="item.image" alt="">
        </dt>
        <dd>
          <p>{{item.title}}</p>
          <p>¥{{item.price}}</p>
          <p>销量<span>{{item.sales}}</span>件</p>
        </dd>
      </dl>
      <p class="noGoodsTitle" v-show="noGoods">没有搜索的您要的数据</p>
    </section>
    <div class="markBox" v-show="bool">
      <div class="markRig" @click="handleClose()">

      </div>
      <transition name="ScreenCom">
        <div class="ScreenCom">
          <div class="category">
            <p>分类 <van-icon name="arrow-up" /></p>
            <span v-for="(item,index) in titleList" @click="ChangeCodes(item)" :class="{col:item.cid == cid}" >{{item.title}}</span>
          </div>
          <div class="categoryPrice" style="border-bottom: 1px solid #efefef;padding-bottom: 0.1rem;box-sizing: border-box;">
            <p>价格 <span class="price"> <input type="text" placeholder="最低价" v-model="price">----<input type="text" v-model="price2" placeholder="最高价"></span></p>
            <span v-for="(item,index) in priceList" @click="choosePrice(item)" :class="{col:item.min == price}">{{item.title}}</span>
          </div>
          <div class="category" v-for="(item,index) in GoodsLists" v-if="GoodsLists.length>0" :key="item.attrid">
            <p>{{item.title}} <van-icon name="arrow-up" /></p>
            <span v-for="(items,index) in item.param" @click="changeBrand(items.pid,item.attrid)" :class="{col:items.show}">{{items.title}}</span>
          </div>
          <footer>
            <span>共{{shopListItem.length}}件</span>
            <button class="resetOption">全部重选</button>
            <button class="sure" @click="sureGoods()">确定</button>
          </footer>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
  import {SearchGoods,getGoodsItemizeList,getGoodsListItem} from "../../api/list/list";

  export default {
    name:'search',
    data(){
      return{
        shopKeyWords:'',
        value1: 0,
        value2: 'a',
        option1: [
          { text: '全部商品', value: 0 },
          { text: '新款商品', value: 1 },
          { text: '活动商品', value: 2 }
        ],
        option2: [
          { text: '默认排序', value: 'a' },
          { text: '价格从高到低', value: 'b' },
          { text: '价格从低到高', value: 'c' },
        ],
        bool:false,
        titleList:[],
        priceList:[
          {'title':'0-50','min':0,'max':50},
          {'title':'50-99','min':50,'max':99},
          {'title':'100-300','min':100,'max':300},
          {'title':'301-1000','min':301,'max':1000},
          {'title':'1001-4000','min':1001,'max':4000},
          {'title':'4001-9999','min':4001,'max':9999}
        ],
        GoodsLists:[],
        cid:'',
        price:'',
        price2:'',
        shopListItem:[],
        otypes:'all',
        brand:[],
        size:[],
        pinpaiId:'',
        x:true,
        noGoods:false
      }
    },
    created() {
      console.log(this.$route.query.keyWords)
      this.shopKeyWords = this.$route.query.keyWords
      this.initSearch()
      getGoodsItemizeList().then((res)=>{
        this.titleList = res.data.data
        // console.log(this.titleList)
      })
      this.initGoods()
    },
    methods:{
      initSearch(){
        const params = {
          token:'1ec949a15fb709370f',
          kwords:this.$route.query.keyWords
        }
        SearchGoods(params).then((res)=>{
          if(res.data.data !== "没有数据"){
            res.data.data.forEach((item)=>{
              for(let items of item.param){
                items.show = false;
              }
            })
            this.GoodsLists = res.data.data
          }else{
            this.GoodsLists = []
          }
        })
      },
      initGoods(){
        const params = {
          cid:this.cid,
          price1:this.price,
          price2:this.price2,
          otype:this.otypes,
          param : [],
          kwords:this.shopKeyWords,
          token:'1ec949a15fb709370f'
        }
        getGoodsListItem(params).then((res)=>{
            // console.log(res.data.data)
            if(res.data.data == '没有数据'){
              this.x = false
              this.noGoods = true
            }else{
              this.shopListItem = res.data.data;
              this.x = true
              this.noGoods = false
            }

        })
      },
      GoBack(){
        history.go(-1)
      },
      handleFiflter(){
        this.bool = true
      },
      handleClose(){
        this.bool = false
      },
      jumpGoods(gid){
        this.$router.push({path:'/commodity/index',query:{gid:gid}})
      },
      ChangeCodes(item){
        console.log(item)
        this.cid = item.cid
      },
      choosePrice(item){
        this.price = item.min
        this.price2 = item.max
      },
      sortGoods(item){
        let data = [...this.shopListItem]
        if(item == 'a'){
            this.shopListItem = data
        }else if (item == 'b'){
          this.shopListItem = this.shopListItem.sort(function (a,b) {
            return b.price - a.price
          })
        }else if(item == 'c'){
          this.shopListItem = this.shopListItem.sort(function (a,b) {
            return a.price - b.price
          })
        }
      },
      searchGoods(e){
        if(e.keyCode == 13){
          this.initGoods()
        }
      },
      changeBrand(childId,fatherId){
        //如果是第一次点的时候
        if(this.pinpaiId == ""){
          const  fathers = this.GoodsLists.filter((item)=>{
            if(item.attrid == fatherId) {
              return item.param;
            }
          });
          fathers[0].param.forEach((items)=>{
            if(items.pid == childId){
              items.show = true;
            }
          });
          this.pinpaiId = fatherId;
        }else if(this.pinpaiId == fatherId){
          const  fathers = this.GoodsLists.filter((item)=>{
            if(item.attrid == fatherId) {
              return item.param;
            }
          });
          //如果点击的已经选中的话 再次点击取消选中
          fathers[0].param.forEach((items)=>{
            if(items.pid == childId){
              if(items.show){
                items.show = false;
              }else{
                items.show = true;
              }
            }
          })
        }else if(this.pinpaiId != fatherId){
          const  fathers = this.GoodsLists.filter((item)=>{
            if(item.attrid == fatherId) {
              return item.param;
            }
          });
          this.pinpaiId = fatherId;
          fathers[0].param.forEach((items)=>{
            if(items.pid == childId){
              items.show = true;
            }
          });
        }
      },
      sureGoods(){
        this.bool = false
        this.initGoods()
      }
    }
  }
</script>
<style lang="less" scoped>
  .search{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    header{
      height: 1.6rem;
      width: 100%;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #efefef;
      .headerTop{
        border-bottom: 1px solid #efefef;
        height: 0.8rem;
        width: 100%;
        display: flex;
        span{
          width: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          i{
            font-size: 0.4rem;
          }
        }
        .seachInput{
          flex: 1;
          background: #eaeaea;
          height: 0.6rem;
          margin-top: 0.1rem;
          border-radius: 0.1rem;
          display: flex;
          input{
            background: none;
            border: none;
            outline: none;
          }
          i{
            font-size: 0.32rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.5rem;
            height: 0.6rem;
            font-weight: 700;
            color: white;
          }
        }
      }
    }
    section{
      width: 100%;
      height: 100%;
      overflow: auto;
      dl{
        width: 100%;
        display: flex;
        margin-top: 0.1rem;
        dt{
          width: 2.4rem;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.1rem 0;
          box-sizing: border-box;
          img{
            width: 2rem;
            height: 2rem;
            display: block;
          }
        }
        dd{
          flex: 1;
          border-bottom: 1px solid #efefef;
          p:nth-child(2){
            color: red;
            line-height: 1rem;
          }
        }
      }
      .noGoodsTitle{
        text-align: center;
        line-height: 1rem;
        font-size: 0.4rem;
      }
    }
    .markBox{
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      position: fixed;
      top: 0;
      left: 0;
      .markRig{
        width: 20%;
        height: 100%;
        float: left;
      }
      .ScreenCom {
        width: 80%;
        height: 100%;
        background: white;
        float: left;
        padding: 0 0.2rem;
        box-sizing: border-box;
        overflow: auto;
        padding-bottom: 2rem;
        box-sizing: border-box;
        animation: go 1s;
        .category{
          width: 100%;
          padding-bottom: 0.1rem;
          box-sizing: border-box;
          border-bottom: 1px solid #efefef;
          p:first-child{
            line-height: 0.8rem;
            display: flex;
            justify-content: space-between;
            font-size: 0.28rem;
            i{
              color: darkorange;
              line-height: 0.8rem;
            }
          }
          span{
            width: 30%;
            margin-left: 0.15rem;
            margin-top: 0.1rem;
            float: left;
            background: #efefef;
            text-align: center;
            border-radius: 0.1rem;
            height: 0.5rem;
            line-height: 0.5rem;
          }
          .col{
            color: white;
            background: #FDA208;
          }
        }
        .categoryPrice{
          width: 100%;
          p:first-child{
            width: 100%;
            line-height: 0.8rem;
            display: flex;
            justify-content: space-between;
            font-size: 0.24rem;
            span{
              flex: 1;
              background: none;
              text-align: right;
              input{
                width: 1rem;
                font-size: 0.24rem;
                text-align: center;
                border: 1px solid #efefef;
                height: 0.4rem;
                margin-top: 0.1rem;
              }
            }
          }
          span{
            width: 30%;
            margin-left: 0.15rem;
            margin-top: 0.1rem;
            float: left;
            background: #efefef;
            text-align: center;
            border-radius: 0.1rem;
            height: 0.5rem;
            line-height: 0.5rem;
          }
          .col{
            color: white;
            background: #FDA208;
          }
        }
        footer{
          width: 80%;
          height: 1rem;
          display: flex;
          position: fixed;
          bottom: 0;
          right: 0;
          background: white;
          span{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          button{
            flex: 1;
            border: none;
          }
          .resetOption{
            background: #efefef;
          }
          .sure{
            background: #FDA208;
            color: white;
          }
        }
      }
    }
  }
  @keyframes go{
    from{
      transform: translateX(100%);
    }
    to{
      transform: translateX(0%);
    }
  }
</style>
